<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="share-btn">
				<text class="iconfont icon-share"></text>
			</view>
		</view>
		
		<!-- 活动图片轮播 -->
		<swiper class="banner-swiper" circular :indicator-dots="true" :autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(img, index) in activityInfo.images" :key="index">
				<image :src="img" mode="aspectFill" class="banner-image"></image>
			</swiper-item>
		</swiper>
		
		<!-- 活动基本信息 -->
		<view class="activity-info">
			<view class="title-section">
				<text class="title">{{ activityInfo.title }}</text>
				<view class="category-tags">
					<view class="category-tag" v-for="(category, idx) in activityInfo.categories" :key="idx">
						{{ category.name }}
					</view>
				</view>
			</view>
			
			<view class="price-section">
				<view class="price">
					<text class="symbol">¥</text>
					<text class="number">{{ activityInfo.price }}</text>
				</view>
				<view class="status" :class="activityInfo.status">{{ activityInfo.statusText }}</view>
			</view>
			
			<!-- 活动信息列表 -->
			<view class="info-list">
				<view class="info-item">
					<text class="iconfont icon-time"></text>
					<view class="content">
						<text class="label">活动时间</text>
						<text class="value">{{ activityInfo.time }}</text>
					</view>
				</view>
				<view class="info-item">
					<text class="iconfont icon-location"></text>
					<view class="content">
						<text class="label">活动地点</text>
						<text class="value">{{ activityInfo.location }}</text>
					</view>
				</view>
				<view class="info-item">
					<text class="iconfont icon-people"></text>
					<view class="content">
						<text class="label">活动人数</text>
						<text class="value">{{ activityInfo.currentParticipants }}/{{ activityInfo.maxParticipants }}人</text>
					</view>
				</view>
				<view class="info-item">
					<text class="iconfont icon-organizer"></text>
					<view class="content">
						<text class="label">主办方</text>
						<text class="value">{{ activityInfo.organizer }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 活动详情 -->
		<view class="detail-section">
			<view class="section-title">活动详情</view>
			<rich-text :nodes="activityInfo.detail"></rich-text>
		</view>
		
		<!-- 活动须知 -->
		<view class="notice-section">
			<view class="section-title">活动须知</view>
			<view class="notice-item" v-for="(item, index) in activityInfo.notices" :key="index">
				<text class="dot">•</text>
				<text class="text">{{ item }}</text>
			</view>
		</view>
		
		<!-- 已报名用户 -->
		<view class="participants-section" v-if="activityInfo.participants.length > 0">
			<view class="section-title">已报名 ({{ activityInfo.currentParticipants }}人)</view>
			<scroll-view class="avatars-list" scroll-x="true">
				<view class="avatar-item" v-for="(user, index) in activityInfo.participants" :key="index">
					<image :src="user.avatar" mode="aspectFill"></image>
					<text>{{ user.name }}</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="left-btns">
				<view class="action-btn" @click="toggleCollect">
					<text class="iconfont" :class="isCollected ? 'icon-collected' : 'icon-collect'"></text>
					<text>收藏</text>
				</view>
				<view class="action-btn" @click="contactOrganizer">
					<text class="iconfont icon-contact"></text>
					<text>联系主办方</text>
				</view>
			</view>
			<button class="signup-btn" :class="{ disabled: activityInfo.status === 'full' }" @click="handleSignup">
				{{ activityInfo.status === 'full' ? '已满员' : '立即报名' }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			activityId: '',
			isCollected: false,
			activityInfo: {
				title: '周末下午茶约会',
				price: '128',
				status: 'ongoing',
				statusText: '报名中',
				time: '2024-03-20 14:00',
				location: '杭州市西湖区金融城',
				currentParticipants: 8,
				maxParticipants: 20,
				organizer: '杭州约会派对',
				categories: [
					{ name: '约会', id: 1 },
					{ name: '美食', id: 5 }
				],
				images: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png'
				],
				detail: `
					<div style="font-size: 28rpx; color: #333; line-height: 1.6;">
						<p>【活动介绍】</p>
						<p>精致下午茶,浪漫音乐,优雅环境,邂逅美好。我们为您准备了:</p>
						<p>• 精选茶点套餐</p>
						<p>• 专业红酒品鉴</p>
						<p>• 轻音乐演奏</p>
						<p>• 互动交友环节</p>
						<p>【活动流程】</p>
						<p>14:00-14:30 签到入场</p>
						<p>14:30-15:30 下午茶时光</p>
						<p>15:30-16:30 红酒品鉴</p>
						<p>16:30-17:30 互动交友</p>
						<p>17:30-18:00 自由交流</p>
					</div>
				`,
				notices: [
					'请准时到达活动地点',
					'活动费用包含茶点、红酒品鉴',
					'请着正式服装参加',
					'现场提供免费WiFi',
					'禁止吸烟',
					'活动仅限18岁以上成年人参加'
				],
				participants: [
					{ avatar: '/static/avatar1.png', name: '小明' },
					{ avatar: '/static/avatar2.png', name: '小红' },
					{ avatar: '/static/avatar3.png', name: '小华' },
					{ avatar: '/static/avatar4.png', name: '小李' },
					{ avatar: '/static/avatar5.png', name: '小张' }
				]
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.activityId = options.id
			// TODO: 根据id获取活动详情
			}
		},
		methods: {
		goBack() {
			uni.navigateBack()
		},
		toggleCollect() {
			this.isCollected = !this.isCollected
			uni.showToast({
				title: this.isCollected ? '收藏成功' : '已取消收藏',
				icon: 'none'
			})
		},
		contactOrganizer() {
			uni.navigateTo({
				url: '/pages/find/chat?id=organizer'
			})
		},
		handleSignup() {
			if (this.activityInfo.status === 'full') {
				uni.showToast({
					title: '活动已满员',
					icon: 'none'
				})
				return
			}
			
			uni.showModal({
				title: '确认报名',
				content: '是否确认报名参加该活动？',
				success: (res) => {
					if (res.confirm) {
						// TODO: 处理报名逻辑
						uni.showToast({
							title: '报名成功',
							icon: 'success'
						})
					}
				}
			})
		}
		}
	}
</script>

<style lang="scss">
.page-container {
	min-height: 100vh;
	background: #f8f9fa;
	padding-bottom: 120rpx;
	
	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background: rgba(255,255,255,0.98);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		z-index: 100;
		
		.back-btn, .share-btn {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.iconfont {
				font-size: 40rpx;
				color: #333;
			}
		}
	}
	
	.banner-swiper {
		height: 500rpx;
		
		.banner-image {
			width: 100%;
			height: 100%;
		}
	}
	
	.activity-info {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.title-section {
			margin-bottom: 20rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 16rpx;
			}
			
			.category-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 12rpx;
				
				.category-tag {
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					
					&:nth-child(1) {
						background: rgba(255,105,180,0.1);
						color: #ff69b4;
					}
					
					&:nth-child(2) {
						background: rgba(64,158,255,0.1);
						color: #409eff;
					}
				}
			}
		}
		
		.price-section {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			
			.price {
				.symbol {
					font-size: 28rpx;
					color: #ff69b4;
				}
				
				.number {
					font-size: 48rpx;
					font-weight: 600;
					color: #ff69b4;
				}
			}
			
			.status {
				padding: 4rpx 16rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				
				&.ongoing {
					background: rgba(255,105,180,0.1);
					color: #ff69b4;
				}
				
				&.full {
					background: #f5f5f5;
					color: #999;
				}
			}
		}
		
		.info-list {
			.info-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 20rpx;
				
				.iconfont {
					font-size: 32rpx;
					color: #999;
					margin-right: 16rpx;
					margin-top: 4rpx;
				}
				
				.content {
					flex: 1;
					
					.label {
						font-size: 26rpx;
						color: #999;
						margin-bottom: 4rpx;
					}
					
					.value {
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}
	
	.detail-section, .notice-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 20rpx;
			
			&::before {
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 32rpx;
				background: #ff69b4;
				margin-right: 16rpx;
				vertical-align: -4rpx;
			}
		}
	}
	
	.notice-section {
		.notice-item {
			display: flex;
			margin-bottom: 16rpx;
			
			.dot {
				color: #ff69b4;
				margin-right: 12rpx;
			}
			
			.text {
				flex: 1;
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
			}
		}
	}
	
	.participants-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 20rpx;
		}
		
		.avatars-list {
			white-space: nowrap;
			
			.avatar-item {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				margin-right: 30rpx;
				
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-bottom: 8rpx;
				}
				
				text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		
		.left-btns {
			display: flex;
			margin-right: 30rpx;
			
			.action-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;
				
				.iconfont {
					font-size: 40rpx;
					color: #999;
					margin-bottom: 4rpx;
					
					&.icon-collected {
						color: #ff69b4;
					}
				}
				
				text {
					font-size: 22rpx;
					color: #999;
				}
			}
		}
		
		.signup-btn {
			flex: 1;
			height: 80rpx;
			background: linear-gradient(135deg, #ff69b4, #ff4d94);
			color: #fff;
			font-size: 32rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			&.disabled {
				background: #ccc;
			}
		}
	}
}
</style>
